<template>
	<view class="orderDeta">
		<view class="table">
			<view class="header">
				<view class="item first"></view>
				<view class="item">识别</view>
				<view class="item">数量</view>
				<view class="item">价格</view>
			</view>
			<view class="content">
				<view class="row">
					<view class="cell red">装运单号</view>
					<view class="cell flex3">{{data.express_sn}}</view>

				</view>
				<view class="row">
					<view class="cell red">车号</view>
					<view class="cell flex3">{{data.car_no}}</view>
				</view>
				<view class="row">
					<view class="cell red">物流名称</view>
					<view class="cell flex3">{{data.express_name}}</view>
				</view>

				<view class="row">
					<view class="cell">盖雨布梯度</view>
					<view class="cell">{{data.level}}</view>
					<view class="cell"></view>
					<view class="cell">{{data.pre_price}}</view>
				</view>

				<view class="row" v-for="(item,index) in data.detail_json" :key="index">
					<view class="cell">{{item.title}}</view>
					<view class="cell">单价/{{item.pre_price}}</view>
					<view class="cell num">{{item.num}}</view>
					<view class="cell">{{item.total}}</view>
				</view>
				<view class="row">
					<view class="cell total">总价</view>
					<view class="cell"></view>
					<view class="cell"></view>
					<view class="cell total">{{data.total_price}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		onLoad
	} from "@dcloudio/uni-app";

	import {
		orderDetail
	} from '@/util/request/api.js';

	const data = ref({
		express_sn: "",
		car_no: "",
		express_name: ""
	});
	onLoad(async (option) => {
		let res = await orderDetail({
			params: {
				id: option.id
			}
		});
		res.detail_json = res.detail_json.map(item => ({
			...item,
			total: Number(item.pre_price) * Number(item.num) || 0
		}));
		data.value = res;
	})
</script>

<style lang="scss" scoped>
	.orderDeta {
		min-height: calc(100vh - var(--window-top));
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #fff;

		.table {
			border-radius: 10rpx;
			overflow: hidden;

			.header {
				border-left: 1rpx solid #2282FC;
				border-right: 1rpx solid #2282FC;
				box-sizing: border-box;
				background-color: #2282FC;
				display: flex;
				justify-content: space-between;

				.item {
					flex: 1;
					height: 72rpx;
					line-height: 72rpx;
					text-align: center;
					color: #FFFFFF;
					font-size: 32rpx;
					border-left: 1rpx solid #F1F3F7;
					box-sizing: border-box;

					&.first {
						flex: 0 0 188rpx;
						border-left: none;
					}
				}
			}

			.content {
				border: 1rpx solid #F1F3F7;
				box-sizing: border-box;

				.row {
					display: flex;
					justify-content: space-between;

					&:nth-child(2n) {
						background: rgba(34, 130, 252, 0.05);
					}

					.cell {
						flex: 1;
						min-height: 68rpx;
						color: #333333;
						font-size: 28rpx;
						word-break: break-all;

						border-left: 1rpx solid #F1F3F7;
						padding: 20rpx 10rpx;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						justify-content: center;

						&:first-child {
							flex: 0 0 188rpx;
							border-left: none;
						}

						&:nth-child(even) {
							font-weight: 400;
						}

						&.red {
							color: #FF0000;
						}

						&.total,
						&.num {
							font-size: 32rpx;
						}

						&.flex3 {
							flex: 3;
							min-height: 40rpx;
						}
					}
				}
			}
		}
	}
</style>